<template>
  <a-popover :arrow="false" placement="bottomRight" title="通知提醒"
             trigger="click"
             overlayClassName="notice-popover"
             :overlayInnerStyle="{padding:0,width:'300px'}">
    <div class="header-button">
      <a-badge dot><bell-outlined/></a-badge>
    </div>
    <template #content>
      <a-list class="notice-list inner-list mini-scrollbar" size="small" :data-source="data">
        <template #renderItem="{item}">
          <a-list-item>
            <a-list-item-meta :title="item.title" :description="item.datetime">
              <template #avatar>
                <a-avatar :src="item.avatar"></a-avatar>
              </template>
            </a-list-item-meta>
          </a-list-item>
        </template>
      </a-list>
      <a-flex class="notification-footer" align="center">
        <a-button type="text" block>清空</a-button>
        <a-divider type="vertical"></a-divider>
        <a-button type="text" block>查看全部</a-button>
      </a-flex>
    </template>
  </a-popover>
</template>

<script setup lang="ts">
import { getIndexAvatar } from '@/utils/avatar.ts';
import { BellOutlined } from '@ant-design/icons-vue';
import { ref } from 'vue';
interface NotificationListType {
  id:number,
  title: string,
  avatar: string,
  datetime: string
}
const data = ref<NotificationListType[]>([])
for (let i = 0; i < 10; i++) {
  data.value.push({
    id: i,
    title: 'Notification ' + i,
    avatar: getIndexAvatar(i+1),
    datetime: '2018-08-07'
  })
}
</script>

<style scoped>
.notification-footer {
  border-top: 1px solid var(--border-color);
  padding-top: 8px;
}
.notice-list{
  height: 324px;
  overflow-y: auto;
}
</style>
